<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort()
			+ path + "/";
%>
<c:set var="path" value="${pageContext.request.contextPath }" />
<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>用户管理</title>
	<meta name="viewport"  content="width=device-width, initial-scale=1">
	<link rel="stylesheet" type="text/css" href="${path}/resource/plugins/bootstrap/css/bootstrap.min.css">
  	<link rel="stylesheet" type="text/css" href="${path}/resource/css/ysrmain.css">
	<link rel="stylesheet" type="text/css" href="${path}/resource/css/gzfx.css">
	<link rel="stylesheet" type="text/css" href="${path}/resource/css/allEquipment.css">
	<link rel="stylesheet" type="text/css" href="${path}/resource/css/myLayer.css">
	<link rel="stylesheet" type="text/css" href="${path}/resource/plugins/date/bootstrap-datetimepicker.min.css" >
	<script src="${path}/resource/plugins/jQuery/jquery-2.2.3.min.js"></script>
	<script type="text/javascript" src="${path}/resource/plugins/bootstrap/js/bootstrap.min.js"></script>
		<script src="${path}/resource/plugins/date/bootstrap-datetimepicker.min.js" charset="UTF-8"></script>
	<script src="${path}/resource/plugins/date/bootstrap-datetimepicker.zh-CN.js" charset="UTF-8"></script>
	<script type="text/javascript" src="${path}/resource/js/echarts.min.js"></script>	
	<script type="text/javascript"></script>
</head>
<body>
	
	<!-- 头部 -->
	<!-- 开始 -->
	<jsp:include page="./top_nav.jsp"></jsp:include>
	<!-- 头部结束 -->
    <!-- 右侧内容区域 -->
    <div class="right-content  container-fluid">
    	<div class="row layer">
	    	<div class="layer1" >
	    		<!-- 主要图表区域 -->
	    		<div class=" row right-nav">
		    			<div class="title-name">
		    				<span>用户管理</span>
		    				
		    			</div>
		    			<div class=" right nav-over padding-r-1  ">
		    				  <a href="javascript:void(0)" class="add-a">新增</a>
		    				         <button class=" search-btn float-r" type="button" onclick="search();"></button>
						      <input id="require" type="text" placeholder="请输入检索的用户信息" class="back-m1 search-input float-r search back-m1">					      										      			
		    			</div>	    			
		    	</div>	
			    <!-- Table -->
			    <div class="table-div content-img">
				  <table id="listtable" class="table table-striped" style="font-size: 13px">
				  	  <tr>
						  <th>工号</th>
						  <th>姓名</th>
						  <th>联系电话</th>
						  <th>邮箱</th>
						  <th>详细</th>
						  <th>删除</th>
					  </tr>
					  <tr>
						  <td><a class="color-w" href="<%=path%>/manage/redirect/allEquip/faultAnalysis?serialNum=0181413c">0181413c</a></td>
						  <td>某某某</td>
						  <td>1303666666</td>
						  <td>328174740@123.com</td>
						  <td><img class="table-icon detailedMsg"alt="" src="${path}/resource/images/sbmsg.png"></td>
						  <td><img class="table-icon remove" alt="" src="${path}/resource/images/sbsc.png"></td>
					  </tr>
					  <tr>
						  <td><a class="color-w" href="<%=path%>/manage/redirect/allEquip/faultAnalysis?serialNum=0181413c">0181413c</a></td>
						  <td>某某某</td>
						  <td>1303666666</td>
						  <td>328174740@123.com</td>
						  <td><img class="table-icon" alt="" src="${path}/resource/images/sbmsg.png"></td>
						  <td><img class="table-icon" alt="" src="${path}/resource/images/sbsc.png"></td>
					  </tr>
					  <tr>
						  <td><a class="color-w" href="<%=path%>/manage/redirect/allEquip/faultAnalysis?serialNum=0181413c">0181413c</a></td>
						  <td>某某某</td>
						  <td>1303666666</td>
						  <td>328174740@123.com</td>
						  <td><img class="table-icon" alt="" src="${path}/resource/images/sbmsg.png"></td>
						  <td><img class="table-icon" alt="" src="${path}/resource/images/sbsc.png"></td>
					  </tr>
					  <tr>
						  <td><a class="color-w" href="<%=path%>/manage/redirect/allEquip/faultAnalysis?serialNum=0181413c">0181413c</a></td>
						  <td>某某某</td>
						  <td>1303666666</td>
						  <td>328174740@123.com</td>
						  <td><img class="table-icon" alt="" src="${path}/resource/images/sbmsg.png"></td>
						  <td><img class="table-icon" alt="" src="${path}/resource/images/sbsc.png"></td>
					  </tr>
				  </table>
			    </div>
			    <!-- 分页 -->
			    <div id="fenye" class="pagers">
			  	  <nav class="float-r padding-3">
			  	    <ul class="pagination">
			  	      <li id="goPrev"><a href="javascript:void(0);">&laquo;</a></li>
				      <li class="active yema"><a href="javascript:void(0);">1</a></li>
				      <li class="yema"><a href="javascript:void(0);">2</a></li>
				      <li class="yema"><a href="javascript:void(0);">3</a></li>
				      <li class="yema"><a href="javascript:void(0);">4</a></li>
				      <li class="yema"><a href="javascript:void(0);">5</a></li>
				      <li id="goNext"><a href="javascript:void(0);">&raquo;</a></li>
			  	    </ul>
			  	  </nav>
			    </div>
			</div>
			<!--删除弹出层-->
			<div class="layer2 layer-remove">
				<div class="layer-content">
					<div class="layer-msg">
						<div>确定删除该条记录?
						</div>
					</div>
					<div class="layer-btn">
						<div class="sure2 delBtn" id="delSure"><a href="javascript:void(0)" class="color-w">确定</a></div>
						<div class="cancel2 delBtn" id="delCancel"><a href="javascript:void(0)" class="color-w">取消</a></div>
					</div>					
				</div>
			</div>
			<!--详情弹出层 -->
			<div class="layer2 layer-amsg">
				<div class="layer-content">
						<div class="layer-top">
							<div>
								用户<span id="detailUserID">20001111</span>详细信息
							</div>
						</div>
					
						<div class="layer-body">
							<label class="font-s1">姓名:</label><input id="detailUserName" type="text">
							<br>
							<label class="font-s1">电话:</label><input id="detailPhone" type="text">
							<br>
							<label class="font-s1">邮箱:</label><input id="detailMail" type="text">
							<br>
							<label class="font-s1">身份:</label>
							<select id="detailRoleId" style="padding:2px 0;width:200px">
								<option value="管理员">管理员</option>
								<option value="普通用户">普通用户</option>
							</select>
						</div>
					<div class="layer-btn">
						<div class="sure2" id="detailSure"><a href="javascript:void(0)" class="color-w" onclick="update();">确定</a></div>
						<div class="cancel2" id="detailCancel"><a href="javascript:void(0)" class="color-w">取消</a></div>
					</div>	
									
				</div>
			</div>
			<!--录入弹出层 -->
			<div class="layer2 layer-add">
				<div class="layer-content">
					<div class="layer-top">
						<div>
							用户信息录入
						</div>
					</div>
						<div class="layer-body">
							<label class="font-s1">工号:</label><input id="addUserId" type="text">
							<br>
							<label class="font-s1">姓名:</label><input id="addUserName" type="text">
							<br>
							<label class="font-s1">电话:</label><input id="addPhone" type="text">
							<br>
							<label class="font-s1">邮箱:</label><input id="addMail" type="text">	
							<br>
							<label class="font-s1">身份:</label>
							<select id="addRoleId" style="padding:2px 0;width:200px">
								<option value="管理员">管理员</option>
								<option value="普通用户">普通用户</option>
							</select>
							<br>
							<label class="font-s1">密码:</label><input id="addPassword" type="text">	
							<br>
							<label class="font-s1">确定:</label><input type="text">	
							
						</div>
					<div class="layer-btn">
						<div class="sure2" id="sure2" ><a href="javascript:void(0)" class="color-w" onclick="userAdd();">录入</a></div>
						<div class="cancel2" id="cancel2"><a href="javascript:void(0)" class="color-w">取消</a></div>
					</div>	
									
				</div>
			</div>
		</div>
    </div>

	


	
</body>
<script type="text/javascript" src="${path}/resource/js/webSocketConf.js"></script>	
<script type="text/javascript">
$(function(){
	$(".menu-left").children("dl").eq(0).addClass("dl-active");
	/* search(); */
	
	attrYemaSearch();
})
/*删除键弹窗  */
// $(function(){
// 	$(".remove").click(function(){
// 		$(".layer-remove").show();
// 	});
// 	$("#cancel").click(function(){
		
// 		$(".layer-remove").hide();
// 	})
	
// })
/*详细信息弹窗  */
// $(function(){
// 	$(".detailedMsg").click(function(){
// 		$(".layer-amsg").show();
// 	})
// 	$("#cancel1").click(function(){
// 		$(".layer-amsg").hide();
// 	})
	
// })
/*新增弹窗  */
$(function(){
	$(".add-a").click(function(){
		$(".layer-add").show();
	})
	$("#cancel2").click(function(){
		$(".layer-add").hide();
	})
})
var curPageNO = 1;
function search() {
	$.ajax({
		type : 'POST',
		url : '<%=path%>/monitor/manageruserMana',
		data : {
			require : $("#require").val(),
			pageSize : 10,
			curPageNO : curPageNO
		},
		dataType : 'json',
		async : false,
		success : function(result) {
			if(result.status == "OK") {
				$('#listtable').text('');
				var html = "<tr><th>工号</th><th>姓名</th><th>联系电话</th><th>邮箱</th><th>详细</th><th>删除</th></tr>";
				if(result.data.list == "[null]") {
					
				} else {
					size = result.data.size;
					var list = eval("(" + result.data.list + ")");
					$.each(list, function(i){
						var href = "<%=path%>/manage/redirect/allEquip/faultAnalysis?serialNum="+list[i].serialNum;
						html += '<tr><td><a class="color-w" href='+href+'>'+list[i].userID +
								'</a></td><td>'+list[i].userName +
								'</td><td>'+list[i].phone +
								'</td><td>'+list[i].mail +
								'</td><td><a href="javascript:void(0);" onclick="userdetail(\''+list[i].userID+'\')"><img alt="" width="25px" src="${path}/resource/images/sbmsg.png"></a></td>' +
								'<td><a href="javascript:void(0);" onclick="userdelete('+list[i].userID+')"><img alt="" width="25px" src="${path}/resource/images/sbsc.png"></a></td></tr>';
					});
				}
				$('#listtable').append(html);
			}
		},
		error : function() {
			//alert("系统错误！");
		}
	});
}

//人员新增
function userAdd() {
	if($('#addUserId').val() == null || $('#addUserId').val() == '') {
		alert('人员工号不能为空!');
		return false;
	}
	$.ajax({
		type : 'POST',
		url : '<%=path%>/monitor/manageruserAdd',
		data : {
        	userId : $('#addUserId').val(),
        	userName : $('#addUserName').val(),
        	phone : $('#addPhone').val(),
        	mail : $('#addMail').val(),
        	roleId : $('#addRoleId').val(),
        	passWord : $('#addPassword').val(),
        },
		dataType : 'json',
		async : false,
		success : function(result) {
			if(result.status == 'OK') {
				if(result.data != null && result.data == "true") {
					alert("新增成功！");
					window.location.href = '<%=path%>/monitor/redirect/userManage';
				} else {
					alert("新增失败！");
				}
			} else {
				alert("新增失败！");
			}
		}
	});
}

//人员详情
function userdetail(userID) {
	if(userID != undefined && userID != "") {
		$("#detailUserID").text(userID);
		$.ajax({
			type : 'POST',
			url : '<%=path%>/monitor/manageruserdetail',
			data : {
				userId : userID
			},
			dataType : 'json',
			async : false,
			success : function(result) {
				if(result.status == 'OK') {console.log(result);
					$('#detailUserName').val(result.data.userName);
					$('#detailPhone').val(result.data.phone);
					$('#detailMail').val(result.data.mail);
					$('#detailRoleId').val(result.data.roleId);
				} else {
					console.error("获取人员详情数据失败！");
				}
			},
			error : function() {
				console.error("系统错误！");
			}
		});
	}
	$(".layer-amsg").show();
}
$("#detailCancel").click(function(){
	$(".layer-amsg").hide();
});
function update() {
	$.ajax({
		type : 'POST',
		url : '<%=path%>/monitor/manageruserUpdate',
		data : {
			userId : $('#detailUserID').text(),
			userName : $('#detailUserName').val(),
			phone : $('#detailPhone').val(),
			mail : $('#detailMail').val(),
			roleId : $('#detailRoleId').val()
		},
		dataType : 'json',
		async : false,
		success : function(result) {
			if(result.status == 'OK') {
				if(result.data != null && result.data == "true") {
					alert("修改成功！");
					$(".layer2").hide();
					attrYemaSearch();
				} else {
					alert("修改失败！");
				}
			}
		}
	});
}

//用户删除
function userdelete(userID) {
	$(".layer-remove").show();
	$(".delBtn").unbind('click');
	
	$(".delBtn").bind('click',function(){
		if(this.id == "delSure") {
			$.ajax({
				type : 'POST',
				url : '<%=path%>/monitor/manageruserdelete',
				data : {
					userId : userID
				},
				dataType : 'json',
				async : false,
				success : function(result) {
					if(result.status == "OK") {
						console.log(result.data);
						if(result.data == "true") {
							alert("删除成功");
							search();
						} else {
							alert("删除失败");
						}
					}
				},
				error : function() {
					//alert("系统错误！");
				}
			});
		}
		$(".layer-remove").hide();
	});
}

//点击页码
function attrYemaSearch() {
	curPageNO = 1;
	search();
	//$('.pagination').html('');
	$('.pagination').html('<li id="goPrev"><a href="javascript:void(0);">&laquo;</a></li>'+
	    '<li id="firstyema" class="active yema"><a href="javascript:void(0);">1</a></li>'+
	    '<li id="goNext"><a href="javascript:void(0);">&raquo;</a></li>');
	if(size > 10) {
		var html = '';
		var yemaToal = (size/10)+1;
		for(var i=2; i<yemaToal; i++) {
			html += '<li class="yema"><a href="javascript:void(0);">'+i+'</a></li>'
		}
		$('#firstyema').after(html);
	}
	attrYeMa();
}
function attrYeMa() {
	$('.yema').click(function() {
		console.log("a");
		$('.yema').removeClass("active");
		$(this).addClass("active");
		curPageNO = $(this).children('a').text();
		search();
	});
	$('#goPrev').click(function() {
		var prevyema = $(this).nextAll('.active').prev('.yema');
		if(prevyema != null && prevyema.length > 0) {
			$(this).nextAll('.active').removeClass("active");
			prevyema.addClass("active");
			curPageNO = prevyema.children('a').text();
			search();
		}
	});
	$('#goNext').click(function() {
		var nextyema = $(this).prevAll('.active').next('.yema');
		if(nextyema != null && nextyema.length > 0) {
			$(this).prevAll('.active').removeClass("active");
			nextyema.addClass("active");
			curPageNO = nextyema.children('a').text();
			search();
		}
	});
}

	/*初始化时间控件*/
	$(function(){
		$(".span-date").click(function(){
			$(this).prev().focus();
		});
		$('.form_date').datetimepicker({
		    language:  'zh-CN',
		    weekStart: 1,
		    todayBtn:  1,
			autoclose: 1,
			todayHighlight: 1,
			startView: 2,
			minView: 2,
			forceParse: 0,
			maxView:4
		});
	})
	
</script>
</html>